<template>
	<view class="my-address">
		<uniSwipeAction>
			<view v-for="(item, index) in addressList" :key="index">
				<uniSwipeActionItem :rightOptions="options" @tap="(o) => handleDelete(o, item)">
					<view class="address-item">
						<view class="address-content">
							<view class="name">
								<text>{{item.adrUser}}</text>
								<text class="phone">{{item.adrMobile}}</text>
							</view>
							<view class="address">
								<text :class="item.label== '家'?'address-label1':item.label== '公司'?'address-label2':item.label== '学校'?'address-label3':''">{{item.label}}</text>
								<text>{{item.address}}</text>
							</view>
						</view>
						<view class="addres-edit">
							<i class="iconfont icon-edit" @tap="handleEdit(1)"></i>
						</view>
					</view>
				</uniSwipeActionItem>
			</view>
		</uniSwipeAction>
		<view class="news-address" @tap="handleEdit(0)">
			新增收货地址
		</view>
	</view>
</template>

<script>
	import { getAllAdressList, deleteAddress } from '../../api/my-order.js'
	import  uniSwipeAction from '@/components/uni/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		name: 'my_address',
		data () {
			return {
				addressList: [],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		components: { uniSwipeAction, uniSwipeActionItem },
		mounted () {
			this.query()
		},
		methods: {
			query () {
				getAllAdressList().then(res => {
					this.addressList = res.data.data
				})
			},
			handleDelete (o, item) {
				item.id && deleteAddress({addressId: item.id}).then(res => {
					if (res.data.code === 200 || res.data.code === '200') {
						uni.showToast({
							title:'删除成功',
							icon: 'success'
						})
					}
				}).finally(() => {
					this.query()
				})
			},
			handleEdit (value) {
				// 0： 表示新建 1：表示编辑
				uni.navigateTo({
					url: '/pages/edit-address/index?edit='+value
				})
			}
		}
	}
</script>

<style scoped>
	.address-item {
		margin: 0 20rpx;
		padding: 10rpx 5rpx;
		border-bottom: 1px solid #E9E9E9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 50rpx;
	}
	.name {
		color: #333333;
	}
	.phone {
		margin-left: 20rpx;
	}
	.address {
		color: #999999;
	}
	.address-label1 {
		height: 45rpx;
		line-height: 45rpx;
		padding:3rpx 5rpx;
		color: #f9f28b;
		background: rgba(249,242,139,0.2);
		margin-right: 20rpx;
	}
	.address-label2 {
		height: 45rpx;
		line-height: 45rpx;
		padding:3rpx 5rpx;
		color: #c3f98b;
		background: rgba(195,249,139,0.2);
		margin-right: 20rpx;
	}
	.address-label3 {
		height: 45rpx;
		line-height: 45rpx;
		padding:3rpx 5rpx;
		color: #8badf9;
		background: rgba(139,173,149,0.2);
		margin-right: 20rpx;
	}
	.news-address {
		position: fixed;
		width: 100%;
		bottom:0;
		line-height: 80rpx;
		color: #FFFDEF;
		background-color: #007AFF;
		text-align: center;
	}
	.addres-edit {
		color: #007AFF;
	}
</style>
